<template>
	<!-- 分类管理页面 -->
	<view>
		<!-- 头部 -->
		<view class="header header-position" v-if="sort.length>0">
			<text>分类</text>
			<text>操作</text>
		</view>

		<view style="height: 90rpx;"></view>
		<!-- 用于占据脱离文档流的位置-->

		<!-- 分类操作列表 -->
		<view class="header content-list" v-for="(item,index) in sort" :key="index">
			<text class="content">{{item.sort_name}}</text>
			<text class="operation" @click="del(item._id,index,item.quantity)">删除</text>
		</view>

		<!-- 数据库没有分类的提示 -->
		<view class="tips" v-if="sort.length == 0">你还没有分类数据</view>

		<!-- 加载提示子组件 -->
		<view class="loading-height">
			<!-- 这里的  view 是用来防止子组件消失后页面高度掉下来的问题-->
			<Loading v-if="loading"></Loading>
		</view>


		<!-- 防止类别太多，最后一个分类被按钮遮挡-->
		<view style="height:200rpx"></view>

		<!-- 底部新增分类按钮 -->
		<view class="bottom-button-position">
			<view class="bottom-button-style" @click="show = true">新增分类</view>
		</view>

		<!-- 点击下架的弹窗 -->
		<!-- 注意：该弹窗小程序支持，uniapp、浏览器等不支持 -->
		<page-container :show="show" position="bottom" @enter="onEnter" @clickoverlay="show = false">
			<view class="space-view">
				<!-- 弹框关闭按钮 -->
				<view class="popup-title" @click="show = false">
					<image src="../../static/images/close.svg" mode="widthFix"></image>
				</view>
				<view class="classification-input">
					<input v-model="sort_name" type="text" placeholder="请输入分类" ccursor-spacing="50" placeholder-class="pl-text" />
				</view>
				<view class="bottom-button-style submit" @click="submit">提交</view>
			</view>
		</page-container>

	</view>
</template>

<script setup>
	import { ref, onMounted, reactive, toRefs } from 'vue';
	import { init } from '@/public/package-js/init.js';
	import { FeedBack } from "@/public/package-js/feedBack.js"
	import { onReachBottom } from '@dcloudio/uni-app' // vue3 导入 uni-app 其他生命周期API。
	import Loading from "@/component/loading/loading.vue"


	onMounted(() => {
		// console.log("挂载了");
		getSort()
	})

	// 1、控制弹窗弹出
	const show = ref(false);

	// 弹窗遮罩层进入时触发
	function onEnter(e) {
		console.log('onEnter', e);
	}

	// 2、获取云数据库的商品分类
	let data = reactive({
		sort: [], //装数据库请求到的分类数据
		sort_name: '', // 弹框输入的新增分类名字
	})
	// 使用 toRefs 解构
	const { sort, sort_name } = toRefs(data)

	// 2-2、发起请求，请求分类数据
	async function getSort() { // 因为 init.js return 的是一个 promise 对象，所以要用 async await 接收一下
		let db = await init()
		// console.log("db", db);
		const res = await db.database().collection('goods_sort').limit(10).field({
			_openid: false // 不让 _openid 返回到控制台
		}).get() // 获取数据库里面的商品分类，每次只拿十个

		// console.log("res", res);
		data.sort = JSON.parse(JSON.stringify(res.data)) // 将请求到的数据进行复制
	}

	// 3、点击提交，新增分类
	async function submit() {
		// console.log("data.sort_name",data.sort_name);
		if (data.sort_name === '') {
			// 调用封装好的交互弹窗
			new FeedBack('请输入分类', 'error').toast()
			return false // 终止函数的执行，就不执行 if 下面的语句
		}

		// 查询数据库是否存在相同的分类
		let db = await init()
		const query_data = await db.database().collection('goods_sort').where({
			sort_name: data.sort_name,
		}).get()

		if (query_data.data.length > 0) {
			new FeedBack("该分类已存在", 'error').toast()
		} else {
			// 向数据库提交新增的分类
			const res = await db.database().collection('goods_sort').add({
				data: {
					sort_name: data.sort_name,
					quantity: 0,
				}
			})
			// console.log("res",res);
			// 将新增的分类 push 进渲染数组里面，页面就可以显示
			// 因为 vue3 使用的 proxy 进行响应式，可以监听到数组的新增和删除等变化
			data.sort.push({
				_id: res._id,
				quantity: 0,
				sort_name: data.sort_name
			})

			// console.log("更新后的数组",data.sort);
			new FeedBack("提交成功", 'success').toast()

			data.sort_name = '', // 输入框清空
				show.value = false //关闭弹窗
		}
	}

	// 4、实现上拉加载（因为一次只请求 10 条数据，上拉加载再次请求）
	let pageNum = 0 // 请求的页数，每请求一次，页数+1
	let loading = ref(false)
	onReachBottom(async () => {
		console.log("到底啦");
		loading.value = true /* 触底的时候让加载圈圈显示 */
		pageNum++
		
		let skip = pageNum * 10 // 跳过多少条
		let db = await init()
		const res = await db.database().collection('goods_sort').skip(skip).limit(10).field({
			_openid: false // 不让 _openid 返回到控制台
		}).get() // 使用skip，跳过对应的条数，输出剩下的
		// console.log("res", res);
		
		let list = [...data.sort, ...res.data] // 将上拉加载的数据和之前的组装
		// 数组对象去重
		let obj = {} // 首先用一个空对象做准备
		let newList = list.reduce((x, y) => { //用一个新列表接收，x代表的是结尾的空数组==> []，y代表的是原数组的所有数据
			// 判断对象里面是否已经有相同_id存在，有的话不做操作，没有的话push进空数组
			obj[y._id] ? '' : obj[y._id] = true && x.push(y)
			return x
		}, [])
		data.sort = newList
		loading.value = false /* 请求完毕就让圈圈消失 */

	})

	// 5、点击删除分类
	function del(id, index, quantity) {
		if (quantity > 0) {
			new FeedBack("请先删除该分类下的商品", 'none').toast()
			return false
		}

		uni.showModal({
			title: '提示',
			content: '确定要将该分类删除吗',
			success: async function(res) {
				if (res.confirm) {
					try { // 用 try catch 捕获一下错误，如果出错就不删除
						let db = await init()
						await db.database().collection('goods_sort').doc(id).remove() //  doc是用来查询单条数据（只能针对 id ）  where条件查询，可以同时多条件查询，且返回的是一个含对象的数组，在没有查询到数据时也会返回一个空数组
						data.sort.splice(index, 1) // 将渲染数组中的也删除
					} catch (e) {
						new FeedBack("删除失败", 'error').toast()
					}
				} else if (res.cancel) {
					new FeedBack("取消操作", 'error').toast()
				}
			}
		});



	}
</script>

<style scoped>
	/* 	.input {
		color: #cccccc;
	} */

	.classification-input {
		background-color: #f7f7f7;
		padding: 20rpx;
		border-radius: 7rpx;
	}

	.pl-text {
		/* 输入框提示语样式 */
		font-weight: 100;
	}

	.submit {
		margin: 60rpx 0 !important;
	}

	.popup-title {
		padding-bottom: 60rpx !important;
	}
</style>
